import React from 'react';
import '@/views/Index/Addzhibo/Addzhibo.scss'
import { PlusOutlined } from '@ant-design/icons'
import { Editor } from '@tinymce/tinymce-react';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import {
    Form,
    Input,
    Button,
    DatePickerProps,
    DatePicker,
    Switch,
    Checkbox,
    Upload,
} from 'antd';


interface Props {

}
// const { RangePicker } = DatePicker;
const { TextArea } = Input;

let editorRef: any = null

// const log = () => {
//     if (editorRef) {
//         //通过Editor组件实例, 获取Editor组件的内容
//         console.log(editorRef.getContent());
//     }
// };

const onChange = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
};

const onChange1 = (checked: boolean) => {
    console.log(`switch to ${checked}`);
};
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY'];

dayjs.extend(customParseFormat);

const { RangePicker } = DatePicker;

const dateFormat = 'YYYY/MM/DD';
const weekFormat = 'MM/DD';
const monthFormat = 'YYYY/MM';
const customFormat: DatePickerProps['format'] = (value) =>
    `custom format: ${value.format(dateFormat)}`;

const customWeekStartEndFormat: DatePickerProps['format'] = (value) =>
    `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
        .endOf('week')
        .format(weekFormat)}`;

function Addzhibo(props: Props) {
    return (
        <div className='addzhibo'>
            <div className="top">
                <div className="nav">课程管理 / 直播 / 新增直播</div>
                <div className="name">新增直播</div>
            </div>
            <div className="basemsg">
                <div className="title">基础信息</div>
                <div className="form">
                    <Form.Item label="直播名称">
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item label="直播封面" >
                        <Upload action="/upload.do" listType="picture-card" >
                            <div>
                                <PlusOutlined />
                                <div style={{ marginTop: 8 }}>点击上传</div>
                            </div>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="直播描述">
                        <TextArea rows={4} placeholder='请输入' />
                    </Form.Item>
                    <Form.Item label="开始时间">
                        <DatePicker placeholder='开始时间' />
                    </Form.Item>
                    <Form.Item label="预计直播时长">
                        <Input placeholder='请输入' />
                    </Form.Item>
                    {/* <div className="list">
                        直播详情：
                        <Editor
                            //apikey需要获取
                            apiKey='EqjFtTz81rMg5KHAN9H7VSDf7V7YBb06'
                            //保存Editor组件的实例
                            onInit={(evt, editor) => editorRef = editor}
                            // initialValue="<p>This is the initial content of the editor.</p >"
                            init={{
                                // height: 500,
                                menubar: false,
                                plugins: [
                                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                                    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                                    'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
                                ],
                                toolbar: 'undo redo | blocks | ' +
                                    'bold italic forecolor | alignleft aligncenter ' +
                                    'alignright alignjustify | bullist numlist outdent indent | ' +
                                    'removeformat | help',
                                content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                            }}
                        />
                    </div> */}
                    <div className="teacher">
                        <p>直播讲师：</p>
                        <a>+选择讲师</a>
                    </div>
                    <div className="playback">
                        <div className="left">
                            <p>直播回放：</p>
                        </div>
                        <div className="right">
                            <Checkbox onChange={onChange}>禁止回放</Checkbox>
                            <div className="xianshi">
                                <Checkbox onChange={onChange}>限时回放</Checkbox>
                                <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />至
                                <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />
                            </div>
                            <Checkbox onChange={onChange}>永久回放</Checkbox>
                        </div>
                    </div>
                    <Form.Item label="排序号">
                        <Input placeholder='请输入' />
                    </Form.Item>
                </div>
            </div>
            <div className="set">
                <div className="title">直播设置</div>
                <div className="switch">
                    <div className="goods">
                        <div className="text">直播商品：</div>
                        <Switch defaultChecked onChange={onChange1} />
                        <a>+选择商品</a>
                    </div>
                    <div className="qiandao">
                        <div className="text">签到：</div>
                        <Switch defaultChecked onChange={onChange1} />
                    </div>
                    <div className="dashang">
                        <div className="text">直播打赏：</div>
                        <Switch defaultChecked onChange={onChange1} />
                    </div>
                    <div className="youhui">
                        <div className="text">优惠券：</div>
                        <Switch defaultChecked onChange={onChange1} />
                        <a>+选择优惠券</a>
                    </div>
                    <div className="share">
                        <div className="text">分享：</div>
                        <Switch defaultChecked onChange={onChange1} />
                    </div>
                    <div className="dianzan">
                        <div className="text">点赞：</div>
                        <Switch defaultChecked onChange={onChange1} />
                    </div>
                    <div className="pinglun">
                        <div className="text">评论：</div>
                        <Switch defaultChecked onChange={onChange1} />
                    </div>
                </div>
            </div>
            <div className="sale">
                <div className="title">售卖信息</div>
                <div className="contain">
                    <div className="left">
                        <p>上架时间：</p>
                    </div>
                    <div className="right">
                        <Checkbox onChange={onChange}>立即上架</Checkbox>
                        <div className="xianshi">
                            <Checkbox onChange={onChange}>定时上架</Checkbox>
                            <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />至
                            <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />
                        </div>
                        <Checkbox onChange={onChange}>暂不上架</Checkbox>
                    </div>
                </div>
                <div className="btn">
                    <Button className='btn1'>提交</Button>
                    <Button className='btn2'>返回</Button>
                </div>
            </div>
        </div>
    );
}

export default Addzhibo;